import { defineConfig, loadEnv } from 'vite'
import path, { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
//支持jsx
import vueJsx from '@vitejs/plugin-vue-jsx'
//支持vue3的setup语法糖
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
//ESlint
import eslintPlugin from 'vite-plugin-eslint'
//Svg
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// 自动导入vue中hook reactive ref等
import AutoImport from 'unplugin-auto-import/vite'
//mock服务
// import { viteMockServe } from 'vite-plugin-mock'
// 引入Unocss
import Unocss from 'unocss/vite'
// 引入 UnoCSS 配置文件
import unoConfig from './uno.config'

//pwa
import { VitePWA } from 'vite-plugin-pwa'

export default ({ mode, command }) => {
  console.log(command)
  const root = process.cwd()
  const env = loadEnv(mode, root)
  // 获取配置环境参数
  console.log(env)
  return defineConfig({
    base: './',
    plugins: [
      //支持vue
      vue({
        template: {
          compilerOptions: {
            // 注册自定义组件micro-app 防止控制台警告
            isCustomElement: tag => /^micro-app/.test(tag)
          }
        }
      }),
      //支持jsx
      vueJsx(),
      //支持vue3的setup语法糖
      VueSetupExtend(),
      //ESlint
      eslintPlugin({
        // 指定需要检查的文件
        include: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.ts'],
        // 是否自动修复
        fix: true,
        // 是否启用缓存
        cache: false
      }),
      //SVG
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],
        symbolId: 'icon-[dir]-[name]'
      }),
      // 自动导入vue中hook reactive ref等
      AutoImport({
        imports: ['vue', 'vue-router'],
        eslintrc: {
          enabled: true
        }
      }),
      // mock 数据的 dev环境
      // viteMockServe({
      //   // 是否开启支持ts
      //   // supportTs: true,
      //   // 设置mockPath为根目录下的mock目录
      //   mockPath: './mock/',
      //   //设置是否启用本地mock文件
      //   localEnabled: true,
      //   //设置打包是否启用 mock 功能
      //   prodEnabled: true,
      //   //设置是否监视mockPath对应的文件夹内文件中的更改
      //   watchFiles: true,
      //   //是否在控制台显示请求日志
      //   logger: true,
      //   // 在main.ts注册后需要在此处注入，否则可能报找不到setupProdMockServer的错误
      //   injectFile: resolve('src/main.js'),
      //   //  这样可以控制关闭mock的时候不让mock打包到最终代码内
      //   injectCode: `
      //     import { setupProdMockServer } from './mockProdServer';
      //     setupProdMockServer();
      //   `
      // }),
      // 使用Unocss
      Unocss(unoConfig),
      //pwa
      VitePWA({
        manifest: {
          name: '应用名称',
          id: 'cs001',
          start_url: 'index.html',
          short_name: '应用名称',
          description: '应用描述',
          theme_color: '#182330',
          background_color: '#FFFF00',
          icons: [
            //添加图标， 注意路径和图像像素正确
            {
              src: '/app-logo.png',
              sizes: '296x296',
              type: 'image/png'
            }
          ],
          //屏幕截图
          screenshots: [
            {
              src: '/app-logo.png',
              type: 'image/png',
              sizes: '296x296',
              form_factor: 'narrow'
            },
            {
              src: '/app-logo.png',
              type: 'image/png',
              sizes: '296x296',
              form_factor: 'wide'
            }
          ]
        },
        registerType: 'autoUpdate',
        workbox: {
          // 缓存相关静态资源，这个放开会导致页面html被缓存，谨慎使用
          globPatterns: ['**/*.{js,css,html,ico,png,jpg,svg}'],
          maximumFileSizeToCacheInBytes: 5000000 // 设置为 5 MB
        },
        devOptions: {
          enabled: true
        }
      })
    ],
    // 配置别名
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    },
    // 开发环境配置
    server: {
      'headers': {
        'Access-Control-Allow-Origin': '*'
      },
      proxy: {
        '^/api': {
          //设置请求地址
          target: env.VITE_APP_BASE_API,
          //是否跨域
          changeOrigin: true,
          //重写地址
          rewrite: path => path.replace(/^\/api/, '')
        }
      }
    },
    // css配置
    css: {
      preprocessorOptions: {
        scss: {
          javascriptEnabled: true,
          additionalData: '@uese "./src/styles/variable.scss";'
        }
      }
    },
    // 打包配置
    build: {
      // 指定输出路径
      outDir: resolve(__dirname, 'dist'),
      // 规定触发警告的 chunk 大小
      chunkSizeWarningLimit: 2000,
      // 是否生成 source map
      sourcemap: false,
      //Vite 会在构建时清空该目录
      emptyOutDir: true,
      // 打包时清除console和debugger
      terserOptions: {
        compress: {
          keep_infinity: true,
          drop_console: true,
          drop_debugger: true
        }
      },
      // rollup配置
      rollupOptions: {
        output: {
          entryFileNames: 'js/[name].[hash].js',
          chunkFileNames: 'js/[name].[hash].js',
          assetFileNames(assetInfo) {
            if (assetInfo.name.endsWith('.css')) {
              return 'css/[name].[hash].css'
            }
            if (['.png', '.jpg', '.jpeg', '.svg'].some(ext => assetInfo.name.endsWith(ext))) {
              return 'imgs/[name].[hash].[ext]'
            }
            return 'assets/[name].[hash].[ext]'
          }
        }
      }
    }
  })
}
